<template>
  <van-form ref="createDelegationInputVO" label-width="85px" label-align="left" :scroll-to-error="true">
    <van-field
      label="机构标志"
      name="logo"
      readonly
      clickable
      input-align="right"
      right-icon="arrow"
      @click="openChangeLogo"
    >
      <template #input>
        <van-image
          round
          width="50"
          height="50"
          :src="getStaticFileUrl(createDelegationInputVO.imagePath)"
          @click="imagePreview(teamInfo.imagePath)"
        />
      </template>
    </van-field>
    <van-field
      v-model.trim="createDelegationInputVO.name"
      label="机构名称"
      name="name"
      placeholder="请输入机构名称"
      :rules="createDelegationInputVO_Rules.name"
    />
    <van-field
      v-model.trim="createDelegationInputVO.shortName"
      label="机构简称"
      name="shortName"
      placeholder="请输入机构简称"
      :rules="createDelegationInputVO_Rules.shortName"
    />
    <van-field
      v-model.trim="createDelegationInputVO.teamName"
      label="参赛机构名称"
      name="teamName"
      placeholder="请输入参赛机构名称"
      :rules="createDelegationInputVO_Rules.teamName"
    />
    <van-field
      v-model.trim="createDelegationInputVO.teamShortName"
      label="参赛机构简称"
      name="teamShortName"
      placeholder="请输入参赛机构简称"
      :rules="createDelegationInputVO_Rules.teamShortName"
    />
    <van-field
      readonly
      clickable
      right-icon="arrow"
      label="机构类型"
      name="delegationTypeCode"
      placeholder="请输入机构类型"
      :value="createDelegationInputDTO.delegationType && createDelegationInputDTO.delegationType.name"
      :rules="createDelegationInputVO_Rules.delegationTypeCode"
      @click="openSelectBox('delegationType')"
    />
    <van-field
      v-model.trim="createDelegationInputVO.ctkCode"
      label="中跆协会员号"
      name="ctkCode"
      placeholder="请输入中跆协会员号"
    />
    <van-field
      v-model.trim="createDelegationInputVO.ptkCode"
      label="省跆协会员号"
      name="ptkCode"
      placeholder="请输入省跆协会员号"
    />
    <van-field
      readonly
      clickable
      name="addressDataName"
      label="所在地区"
      placeholder="所在地区"
      right-icon="arrow"
      :value="createDelegationInputDTO.addressDataName"
      :rules="createDelegationInputVO_Rules.addressDataName"
      @click="openAreaBox"
    />
    <van-field
      v-model.trim="createDelegationInputVO.address"
      rows="1"
      autosize
      label="详细地址"
      type="textarea"
      name="address"
      placeholder="请输入详细地址"
    />
    <van-field
      v-model.trim="createDelegationInputVO.contactPerson"
      label="联系人"
      name="contactPerson"
      placeholder="请输入联系人"
      :rules="createDelegationInputVO_Rules.contactPerson"
    />
    <van-field
      v-model.trim="createDelegationInputVO.phoneNumber"
      label="联系方式"
      name="phoneNumber"
      placeholder="请输入联系方式"
      :rules="createDelegationInputVO_Rules.phoneNumber"
    />
    <van-field
      label="机构认证"
      readonly
      clickable
      input-align="right"
      right-icon="arrow"
      @click="openDelegationImgDialog"
    >
      <template #input>
        <!-- 机构营业执照 -->
        <van-image
          v-if="createDelegationInputVO.licenseImage"
          width="48"
          height="30"
          class="gl_mr_5"
          :src="getStaticFileUrl(createDelegationInputVO.licenseImage)"
          @click="imagePreview(teamInfo.licenseImage)"
        />
        <!-- 机构法人证件照正面 -->
        <van-image
          v-if="createDelegationInputVO.idCardImage"
          width="48"
          height="30"
          class="gl_mr_5"
          :src="getStaticFileUrl(createDelegationInputVO.idCardImage)"
          @click="imagePreview(teamInfo.idCardImage)"
        />
        <!-- 机构法人证件照反面 -->
        <van-image
          v-if="createDelegationInputVO.idCardBackImage"
          width="48"
          height="30"
          class="gl_mr_5"
          :src="getStaticFileUrl(createDelegationInputVO.idCardBackImage)"
          @click="imagePreview(teamInfo.idCardBackImage)"
        />
      </template>
    </van-field>
    <popup-select
      ref="popupSelect"
      :select-data="selectData"
      :default-code="selectDefaultCode"
      :value-key="valueKey"
      @onConfirm="confirmSelectBox"
    />
    <popup-area ref="popupArea" :default-area="defaultArea" @onConfirm="confirmAreaBox" />
    <!-- 头像上传 -->
    <van-popup
      v-model="logoDialog"
      get-container="#app"
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
      <van-nav-bar>
        <template #left>
          <span @click="logoDialog = false">返回</span>
        </template>
      </van-nav-bar>
      <div class="upload_logo" align="center">
        <upload-file
          ref="logo"
          :action="baseUrl + '/api/upload/image'"
          accept=".jpg,.png,.jpeg"
          class-name="logo"
          :file-url="getStaticFileUrl(createDelegationInputVO.imagePath)"
          @uploadSuccess="uploadSuccessLogo"
        >
          <span slot="uploadName" style="font-size: 14px;">点击上传头像</span>
        </upload-file>
      </div>
    </van-popup>
    <!-- 机构认证 - 机构营业执照、机构法人证件照正面、机构法人证件照反面 -->
    <van-popup
      v-model="delegationImgDialog"
      get-container="#app"
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
      <van-nav-bar>
        <template #left>
          <span @click="delegationImgDialog = false">返回</span>
        </template>
      </van-nav-bar>
      <div class="gl_my_20" align="center">
        <upload-file
          ref="licenseImage"
          :action="baseUrl + '/api/upload/image'"
          accept=".jpg,.png,.jpeg"
          class-name="id_card"
          :file-url="getStaticFileUrl(createDelegationInputVO.licenseImage, 'licenseImage')"
          @uploadSuccess="uploadSuccessLicenseImage"
        >
          <span slot="uploadName" style="font-size: 14px;">点击上传机构营业执照</span>
        </upload-file>
      </div>
      <div class="gl_my_20" align="center">
        <upload-file
          ref="idCardImage"
          :action="baseUrl + '/api/upload/image'"
          accept=".jpg,.png,.jpeg"
          class-name="id_card"
          :file-url="getStaticFileUrl(createDelegationInputVO.idCardImage, 'idCardImage')"
          @uploadSuccess="uploadSuccessIdCardImage"
        >
          <span slot="uploadName" style="font-size: 14px;">点击上传机构法人证件照正面</span>
        </upload-file>
      </div>
      <div class="gl_my_20" align="center">
        <upload-file
          ref="idCardBackImage"
          :action="baseUrl + '/api/upload/image'"
          accept=".jpg,.png,.jpeg"
          class-name="id_card"
          :file-url="getStaticFileUrl(createDelegationInputVO.idCardBackImage, 'idCardBackImage')"
          @uploadSuccess="uploadSuccessIdCardBackImage"
        >
          <span slot="uploadName" style="font-size: 14px;">点击上传机构法人证件照反面</span>
        </upload-file>
      </div>
    </van-popup>
  </van-form>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import {
  SiSTKWEventsManagementCreateDelegationInput
} from '@/lib/form/game/swaggerForm';
import { CreateRegisterInput_Rules } from '@/lib/validate/mobile/myCenter';
import PopupSelect from '@/viewMobile/components/PopupSelect';
import PopupArea from '@/viewMobile/components/PopupArea';
import UploadFile from '@/viewMobile/components/UploadFile/index';
import { deepCopy, CopyData } from '@/lib';
export default {
  components: {
    PopupSelect,
    PopupArea,
    UploadFile
  },
  props: {
    teamInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      baseUrl: WEB_CONFIG.VUE_APP_STATIC_FILE_RUL,
      createDelegationInputVO: new SiSTKWEventsManagementCreateDelegationInput(),
      createDelegationInputVO_Rules: new CreateRegisterInput_Rules(),
      createDelegationInputDTO: {},
      // 选择器
      selectData: [],
      selectDefaultCode: '',
      valueKey: 'value',
      defaultArea: [],
      logoDialog: false,
      delegationImgDialog: false
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  watch: {
    teamInfo: {
      handler() {
        this.init();
      }
    }
  },
  created() {
    this.getDict();
    this.init();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    init() {
      this.createDelegationInputDTO = deepCopy(this.teamInfo);
      CopyData(this.createDelegationInputDTO, this.createDelegationInputVO);
      // 处理所在地区显示
      this.createDelegationInputDTO.addressDataName = (this.createDelegationInputVO.provinceCode || '') + (this.createDelegationInputVO.cityCode || '') + (this.createDelegationInputVO.countyCode || '');
    },
    valid() {
      return new Promise((resolve, reject) => {
        this.$refs.createDelegationInputVO.validate().then(() => {
          resolve(this.createDelegationInputVO);
        });
      });
    },
    /* ===== select 选择器相关 ===== */
    openSelectBox(code) {
      // 解决某种情况下弹出框非本系统操作关闭之后无法打开
      this.$refs.popupSelect.close();
      this.selectBoxCode = code;
      this.valueKey = 'value';
      switch (code) {
        // 机构类型
        case 'delegationType':
          this.valueKey = 'value';
          this.selectData = this.dict ? this.dict.delegationType : [];
          this.selectDefaultCode = this.createDelegationInputVO.delegationTypeCode;
          break;
        default:
          this.selectData = this.dict ? this.dict[code] : [];
          this.selectDefaultCode = this.createDelegationInputDTO[this.selectBoxCode];
          break;
      }
      this.$refs.popupSelect.open();
    },
    confirmSelectBox(value) {
      console.log(value);
      switch (this.selectBoxCode) {
        // 民族
        case 'national':
          this.createDelegationInputVO.national = value.value;
          break;
        default:
          this.createDelegationInputVO[this.selectBoxCode] = value.code;
          this.createDelegationInputDTO[this.selectBoxCode] = value.value;
          break;
      }
    },
    openAreaBox() {
      const provinceCode = this.createDelegationInputDTO.provinceCode;
      const cityCode = this.createDelegationInputDTO.cityCode;
      const countyCode = this.createDelegationInputDTO.countyCode;
      this.defaultArea = [provinceCode, cityCode, countyCode];
      this.$refs.popupArea.open();
    },
    confirmAreaBox(value) {
      this.createDelegationInputVO.provinceCode = value[0] && value[0].name;
      this.createDelegationInputVO.cityCode = value[1] && value[1].name;
      this.createDelegationInputVO.countyCode = value[2] && value[2].name;
      this.createDelegationInputDTO.addressDataName = (this.createDelegationInputVO.provinceCode || '') + (this.createDelegationInputVO.cityCode || '') + (this.createDelegationInputVO.countyCode || '');
      this.$refs.popupArea.close();
    },
    uploadSuccessLogo(response) {
      this.$set(this.createDelegationInputVO, 'imagePath', response.tempUrl);
    },
    // 打开修改头像框
    openChangeLogo() {
      this.logoDialog = true;
    },
    // 打开机构认证弹出框
    openDelegationImgDialog() {
      this.delegationImgDialog = true;
    },
    uploadSuccessLicenseImage(response) {
      this.$set(this.createDelegationInputVO, 'licenseImage', response.tempUrl);
    },
    uploadSuccessIdCardImage(response) {
      this.$set(this.createDelegationInputVO, 'idCardImage', response.tempUrl);
    },
    uploadSuccessIdCardBackImage(response) {
      this.$set(this.createDelegationInputVO, 'idCardBackImage', response.tempUrl);
    },
    // 图片预览
    imagePreview(relativeUrl) {
      this.$imagePreview([this.getStaticFileUrl(relativeUrl)]);
      event.stopPropagation();
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl, code) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      } else {
        return code ? '' : require('@/assets/images/face_default.png');
      }
    }
  }
};
</script>
<style>
.upload_logo {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 100%;
  height: 200px;
  transform: translate(-50%, -50%);
}
</style>
